<template>

  <div class="home">
     <div class="ht">
       <div class="htb">
         <div @click="$router.push({name:'List',params:{catname:'快速租车'}})">
           <i class="iconfont icon-shandian1"></i>
           <span> 快速租车</span>
         </div>
         <div @click="$router.push({name:'List',params:{catname:'商务出行'}})">
           <i class="iconfont icon-weibiaoti-icon"></i>
           <span> 商务用车</span>
         </div>
         <div @click="$router.push({name:'List',params:{catname:'庆典用车'}})">
           <i class="iconfont icon-hunqing"></i>
           <span> 庆典用车</span>
         </div>
         <div @click="$router.push({name:'Account',params:{catname:'个人中心'}})">
           <i class="iconfont icon-gerenzhongxin"></i>
           <span> 个人中心</span>
         </div>
       </div>
     </div>
     <div class="hitem">
       <h1>高端出行</h1>
       <div class="hct">
         <div class="ctitem" v-for="item of homecarlist" :key="item.cid" @click="order(item.cid)">
           <div class="cimg">
             <img :src="item.firimg">
           </div>
           <span>{{item.name}} {{item.sits}}座/{{item.pl}}  </span>
           <span>{{item.dayfee}}/天 </span>
         </div>

       </div>
     </div>

    <div class="hitem">
      <h1>新人特价</h1>
      <div class="hct">
        <div class="ctitem" v-for="item of seclist" :key="item.cid" @click="order(item.cid)">
          <div class="cimg">
            <img :src="item.firimg">
          </div>
          <span>{{item.name}} {{item.sits}}座/{{item.pl}} </span>
          <span>{{item.dayfee}}/天 </span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

import { Toast } from 'mand-mobile'
export default {
  name: 'Home',
  data () {
    return {
      homecarlist: [],
      seclist: []
    }
  },
  created: async function () {
    if (!this.$store.state.wxuser.openid && this.$route.query.openid) {
      // 根据 openid来获取用户信息
      let _u = await this.$api.post('/getUser', this.$route.query)
      if (_u.data.state) {
        this.$store.commit('updateUser', _u.data.data)
      } else {
        Toast.failed('获取用户失败')
      }
    }
  },
  beforeMount: async function () {
    Toast.loading('数据加载中...')
    let _res = await this.$api.post('/getlist')
    Toast.hide()
    if (_res.data.state) {
      let _carlist = _res.data.data
      for (let v of _carlist) {
        for (let _v of v.feestanders) {
          if (_v.hours === 24) {
            v.dayfee = _v.fee
          } else if (_v.hours === 8) {
            v.eightfee = _v.fee
          } else if (_v.hours === 4) {
            v.fourfee = _v.fee
          }
        }
      }

      this.homecarlist = [_carlist[6], _carlist[5], _carlist[4]]
      this.seclist = [_carlist[0], _carlist[2], _carlist[1]]
    }
  },
  mounted: async function () {

  },
  methods: {
    order: async function (cid) {
      this.$store.commit('updateOrder', {cid: cid})
      this.$router.push({ name: 'Order', params: {cid} })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .ht{
    height: 35%;
    background: -webkit-linear-gradient(top,transparent,rgba(0,0,0,.7)) , url('../assets/bg.png');
    background-size: cover;
    position: relative;
  }
  .htb{
    position: absolute;
    bottom:0;
    left:0;
    padding:15px 0;
    display:flex;
    width: 100%;
  }
  .htb>div{
    width: 0;
    flex-grow: 1;
    text-align: center;
    color:rgba(255,255,255,.9)
  }
  .htb i{
    font-size: 30px;
  }
  .htb span{
    display: block;
    font-size: 12px;
  }
  .hitem{
    padding:0 10px
  }

  .hitem h1{
    font-size: 14px;
    font-weight: 500;
    line-height: 35px;
    color:#888;
  }
  .hct{
    white-space: nowrap;
    width: 100%;
    overflow-x: scroll;
  }
  .ctitem{
    width: 45vw;
    height: 50vw;

    display: inline-block;
    text-align: center;
    font-size: 12px;
  }
  .cimg{
    width: 35vw;
    height: 35vw;
    margin: 5px auto 0;
    overflow: hidden;
  }

  .cimg >img{
    width: 100%;
  }

  .ctitem span{
    line-height: 20px;
    display: block;
    color:#666
  }
  .ctitem span:last-of-type{
    font-size: 14px;
  }
</style>
